
import {Row,Col,Button,Modal,Form,Input,Select,message,Table ,Tag  , Popconfirm} from "antd"
import {useState,useRef,useEffect,useContext} from "react"
import { ajax } from '@/services';
import { GolBalContext } from '@/redux/index';
import { changeBanjiList } from './../../redux/action';
import { DownloadOutlined , ClearOutlined} from '@ant-design/icons';
const tailLayout1 = {
  wrapperCol:{
      span:14,
      offset:0
  }
}
export default function BanjiAdd(){
  const {state,dispatch} = useContext(GolBalContext)
  const [visible,setVisible] = useState(false);
  const [body,setBody] = useState<any>({});

  const [years,setYears] = useState<Array<any>>([])
  const [list,setList] = useState<Array<any>>([])
  useEffect(()=>{
    var date = new Date();
    var year = date.getFullYear() + '';
    
    var thisyear:any = year.toString().slice(2,4) * 1 ;
    console.log(thisyear) 
    for(var k=thisyear-1;k<thisyear+5;k++){
      years.push(k);
    }
    setYears([...years])
    // 班级序号 
    for(var i=1;i<=20;i++){
      list.push(i<10?'0'+i:i)
    }
    setList([...list])
    getBanjiList({})
  },[])

  const form:any = useRef()
  const yearInp:any = useRef()
  const indexInp:any = useRef()


  const handleOk = ()=>{
    form.current.validateFields()
    .then(async value=>{
      value.name = "千锋武汉-HTML5-"+value.year+''+ value.index 
      let {code,result} = await   ajax.addbanji(value)
      if(code==200){
        // 重新请求数据 
        setVisible(false)
        form.current.resetFields()
        getBanjiList({})
      }
    })
    .catch(err=>{
      message.error("请输入数据")
    })
  }

  const getBanjiList = async (options)=>{
    let {code,result}  = await ajax.getbanjilist(options)
    if(code==200){
      dispatch(changeBanjiList(result))
    }
   }
  const handleCancel = ()=>{
    setVisible(false)
  }
  const columns = [
    {
      title: '#',
      align:"center",
      render:(value,item,index)=>{
        return index+1
      }
    },
    {
      title: '班级年份',
      align:"center",
      dataIndex:"year"
    },
    {
      title: '班级序号',
      align:"center",
      dataIndex:"index"
    },
    {
      title: "班级名称",
      align:"center",
      width:200,
      render:(value,item,index)=>{
        return <Tag color="orange">
            {value.name}
        </Tag>
      }
    },
    {
      title: "删除操作",
      align:"center",
      render:(item,value,index)=>{
        return (
          <Popconfirm
          title="你确定要删除吗?"
          onConfirm={()=>onConfirm(item,index)}
          onCancel={onCancel}
          okText="确定"
          cancelText="不"
        >
          <Button type="primary"  icon={<ClearOutlined />} size="small" danger style={{margin:"4px"}}></Button>
        </Popconfirm>
        )
      }
    }
  ]
  const onCancel = ()=>{

  }
  const onConfirm = async (item,index)=>{
    let {code,result} = await ajax.delonebanji({_id:item._id});
    if(code==200){
      var banjiList = state.get("banjiList").filter(v=>v._id!=item._id);
      dispatch(changeBanjiList(banjiList))
    }
  }
  const changeYearInp = value=>{
    console.log(value)
    console.log(yearInp)
    setBody({
      ...body,
      year:value 
    })
  }
  const changeindexInp = value=>{
    console.log(value)
    setBody({
      ...body,
      index:value 
    })
  }
  const searchBanjiList = ()=>{
    getBanjiList(body);
  }
  return (
    <div>
       <h2> 班级设置  </h2>
        <Row style={{marginTop:15}}>
          <Col>
            <Button onClick={()=>setVisible(true)} type="primary" danger> 添加班级</Button>
          </Col>
        </Row>
        <Row style={{marginTop:15}}>
            <Col span={10} style={{padding: '0 10px'}}>
              <Select placeholder="请选择年份"  onChange={changeYearInp} ref={yearInp} style={{width:"100%"}}>
                {
                  years.map((l,i)=>{
                    return (
                      <Select.Option key={i} value={l}>
                          {l}
                      </Select.Option>
                    )
                  })
                }
              </Select>
            </Col>
            <Col span={10} style={{padding: '0 10px'}}>
              <Select placeholder="请选择序号" style={{width:"100%"}} onChange={changeindexInp}>
                {
                  list.map((l,i)=>{
                    return (
                      <Select.Option key={i} value={l}>
                          {l}
                      </Select.Option>
                    )
                  })
                }
              </Select>
            </Col>
            <Col span={4}>
              <Button type="primary" onClick={searchBanjiList} > 搜索班级</Button>
            </Col>
        </Row>
        <Row style={{marginTop:15}}>
          <Col >
          <Table 
            dataSource={state.get("banjiList")}
            columns={columns}
            sticky
            bordered
            id="table"
            rowKey={item=>item._id}
            pagination={{pageSize:6}}
          >
          </Table>   
          </Col>

        </Row>

        <Modal
         title="添加班级" 
        visible={visible} 
        onOk={handleOk} 
        onCancel={handleCancel}
        cancelText="取消"
        okText="确认"
        >
          <Form
            name="basic"
            initialValues={{ }}
            autoComplete="off"
            className="login-form"
            ref={form}
            layout={'vertical'}
          >
               <Form.Item
                {...tailLayout1}
                  name="year"
                  label="年份选择"
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select>
                    {
                      years.map((l,i)=>{
                        return (
                          <Select.Option key={i} value={l}>
                              {l}
                          </Select.Option>
                        )
                      })
                    }
                  </Select>

                </Form.Item>
                <Form.Item
                {...tailLayout1}
                  name="index"
                  label="序号选择"
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select>
                    {
                      list.map((l,i)=>{
                        return (
                          <Select.Option key={i} value={l}>
                              {l}
                          </Select.Option>
                        )
                      })
                    }
                  </Select>

                </Form.Item>
          </Form>
      </Modal>
    </div>
  )
}